<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="产线或产线组" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="line">
              <j-dict-select-tag placeholder="请选择产线或产线组" v-model="model.line"
                                 dictCode="mes_line_cfg,LINE,LINE" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="工站" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="op">
              <op-select placeholder="请选择工站" :line="model.line" v-model="model.op" @change="opChange"></op-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="物料名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="itempn">
              <j-search-select-tag placeholder="请做出你的选择" v-model="model.itempn"
                                   :dictOptions="itempnOptions">
              </j-search-select-tag>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="物料批次" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="lot">
              <a-input v-model="model.lot" placeholder="请输入批次号"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="工单ID" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="woid">
              <a-input v-model="model.woid" placeholder="请输入工单ID"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="数量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="qty">
              <a-input-number v-model="model.qty" placeholder="请输入批次使用数量" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
              <a-form-model-item label="盘点类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="chgtyp">
                <a-radio-group v-model="model.chgtyp" button-style="solid">
                  <a-radio-button value="1">增加</a-radio-button>
                  <a-radio-button value="2">扣减</a-radio-button>
                </a-radio-group>
              </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="原因代码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="reason">
              <j-dict-select-tag placeholder="请选择原因代码" v-model="model.reason"
                                 dictCode="rationale" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
              <a-input v-model="model.remark" placeholder="请输入备注"  ></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
  import OpSelect from '@comp/mes/OpSelect.vue'
  import Vue from 'vue'
  import { USER_INFO } from '@/store/mutation-types'

  export default {
    name: 'MesMaterialLotHistoryForm',
    components: {
      OpSelect
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        isEdit:false,
        model:{
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
           line: [
              { required: true, message: '请输入产线或产线组!'},
           ],
          op: [
            { required: true, message: '请选择工序!'},
          ],
          itempn: [
            { required: true, message: '请选择物料号!'},
          ],
          chgtyp: [
            { required: true, message: '请选择盘点类型!'},
          ],
           lot: [
              { required: true, message: '请输入物料批次!'},
           ],
           qty: [
              { required: true, message: '请输入数量!'},
           ],
          reason: [
            { required: true, message: '请选择原因!'},
          ],
        },
        itempnOptions:[],
        remark:'',
        url: {
          add: "/trace/mesMaterialLotHistory/add",
          edit: "/trace/mesMaterialLotHistory/edit",
          queryById: "/trace/mesMaterialLotHistory/queryById",
          runCmd:'/monitor/api/runCmd',
          getMaterOption: "/trace/mesMaterialLotHistory/getMaterialOptions"
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      opChange(val){
        console.log(val);
        let params={
          line:this.model.line,
          op:val
        }
        getAction(this.url.getMaterOption, params).then((res) => {
          if (res.success) {
            //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
            console.log('res')
            console.log(res)
            this.itempnOptions = res.result
            //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.loading = false
        })
      },
      add () {
        this.isEdit = false;
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        if (JSON.stringify(record) !== "{}"){
                 this.isEdit = true
        }
        this.visible = true;
      },
      remarkChange(val) {
        let unicode = ''
        for (let i = 0; i < val.length; i++) {
          const charCode = val[i].charCodeAt(0).toString(16) // 获取每个字符的 Unicode 编码值
          if (charCode.length >= 4) {
            unicode += '\\u' + charCode // 对于超过四位的 Unicode 编码值需要添加 \u 前缀
          } else {
            unicode += '\\u00' + charCode // 对于不足四位的 Unicode 编码值需要补零
          }
        }
        this.remark = unicode
      },

      submitForm () {
        if (this.model.remark){
          this.remarkChange(this.model.remark)
        }
        console.log('提交')
        console.log(this.model)
        let stn = ''
        // if (this.model.op){
        //   stn =this.model.op.substring(2)
        //   console.log(stn)
        // }
        // 触发表单验证
            const that = this
            this.load = {
              serviceid: 'mes',
              cmd: 'mchange',
              entityid: this.model.lot,
              clientid: that.model.line + ';;',
              itempn: this.model.itempn,
              qty: this.model.qty,
              chgtyp: this.model.chgtyp,
              reason: this.model.reason,
              user: Vue.ls.get(USER_INFO).username,
              woid: this.model.woid,
              remark:this.remark,
            }
            that.confirmLoading = true
            httpAction(this.url.runCmd, this.load, 'post').then((res) => {
            }).finally(() => {
              that.confirmLoading = false
            })

      },
    }
  }
</script>